import  { useEffect, useRef, useState } from "react";
import Header from "@shared/header";
import Back from "@shared/back";
import styles from "@pages/home/widgets/news/styles/styles.module.less";
import css from "@pages/searchResult/styles/styles.module.less";
// import { Link } from "react-router-dom";
// import GeekIcon from "@shared/geekIcon";

import { useParams } from "react-router-dom";
import { useTypedDispatch, useTypedSelector } from "@store/index";
import { useLazyRequestSearchResultQuery } from "@service/search";
import NewsItem from "@pages/home/widgets/news/widgets/Item";
import Infinite from "@shared/infinite";
import { clearResults, saveResults, searchResultSelectors } from "@slice/search";

interface News {
    art_id: string
    title: string
    aut_name: string
    comm_count: number
    pubdate: string

    cover: {
        type: string | number
        images: string[]
    }
    aut_id: string
    is_top: number
    // ...其他必要字段
}


export default function SearchResult() {
    // 获取搜索关键字
    const { key } = useParams();
    // 用于获取搜索结果的方法
    const [requestSearchResult] = useLazyRequestSearchResultQuery();
    // 用于记录页码
    // 由于在当前逻辑中, 页码只和逻辑有关, 和模板无关, 所以此处页码使用 ref 的方式存储
    // 如果使用状态的方式存储, 会导致页面发生无效更新
    const page = useRef(1);
    // 用于记录是否还有更多数据可以加载
    // 由于在模板中使用了 hasMore, 它的变化需要驱动视图更新, 所以采用状态的方式进行存储
    const [hasMore, setHasMore] = useState(true);
    // 用于记录本地已经存储的搜索结果的数量
    const localCount = useTypedSelector(searchResultSelectors.selectTotal);
    // 用于记录服务端返回的总数据数量, 初始为-1, 当做标识使用
    const allCount = useRef(-1);
    // 用于记录本地存储的搜索结果
    const results = useTypedSelector(searchResultSelectors.selectAll);
    // 获取 dispatch 方法
    const dispatch = useTypedDispatch();

    // 用于加载更多数据的方法
    const loadMore = () => {
        // 发送请求获取更多数据
        return requestSearchResult({ page: page.current, per_page: 10, q: key! })
            .unwrap()
            .then((response) => {
                // 保存搜索结果
                dispatch(saveResults(response.data.results));
                // 记录服务端返回的数据总量
                allCount.current = response.data.total_count;
                // 页码加一
                page.current = page.current + 1;
            });
    };

    // 监听本地存储的搜索结果数量是否发生变化
    useEffect(() => {
        // 如果当前为组件初次挂载, 不需要调用 setHasMore, 因为我们必须在组件初次挂载时假设 hasMore 的值为 true
        // 让它发送请求获取搜索结果
        if (allCount.current === -1) return;
        // 如果本地存储的搜索结果数量不等于数据总量
        // 表示还有更多数据可以加载
        setHasMore(localCount !== allCount.current);
    }, [localCount]);

    // 组件卸载之前清空搜索结果
    useEffect(() => {
        return () => {
            dispatch(clearResults());
        };
    }, [dispatch]);

    return (
        <div className={css.result}>
            <Header
                title={"搜索结果"}
                left={<Back onClick={() => dispatch(clearResults())} />}
            />
            <ul className={styles.news}>
                {results.map((news) => (  // 移除类型断言
                    <NewsItem key={news.art_id} news={news} />
                ))}
            </ul>
            <Infinite hasMore={hasMore} loadMore={loadMore} />
        </div>
    );
}